import React, { useState } from 'react';
import { Form, Select, Modal, message } from 'antd';
import { TaskPressType, TaskPressTypeList } from '@/pages/Task/utils';
import LimitedTextArea from '@/pages/Task/components/LimitedTextArea';
import { pressTask } from '@/pages/Task/services';
import { getCommonContent } from '@/pages/Task/components/InfoModal/commonContent';
import { MODAL_DEFAULT_PARAM, MODAL_FORCE_PARAM } from '../config';

const getCardContent = data => {
    const cols = [
        {
            title: '温馨提示',
            dataIndex: 'processTaskEmployeeName',
            render: value => {
                if (!value) {
                    return '';
                }
                return `当前任务正在待【${value} 】处理中`;
            }
        },
        {
            title: '被催办人',
            dataIndex: 'processTaskEmployeeName'
        }
    ];
    return getCommonContent(data, cols);
};
const PressActionModal = ({ form, onOk, taskId, visible, setVisible, taskRecord }) => {
    const { getFieldDecorator, setFieldsValue, validateFields, getFieldValue } = form;
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [contentHidden, setContentHidden] = useState(true);
    const handleOk = () => {
        validateFields((err, values) => {
            if (err) {
                return;
            }
            setConfirmLoading(true);
            pressTask({ taskId, ...values })
                .then(res => {
                    const { code, msg } = res;
                    if (code !== 10000) {
                        message.error(msg || '操作失败~~~');
                        return;
                    }
                    if (onOk) {
                        onOk();
                    }
                    setVisible(false);
                })
                .finally(() => {
                    setConfirmLoading(false);
                });
        });
    };
    const handleSelectChange = val => {
        setContentHidden(val === TaskPressType.SYSTEM);
        setFieldsValue({
            content: val === TaskPressType.SYSTEM ? taskRecord.pressTemplate : ''
        });
    };
    return (
        <Modal
            {...MODAL_DEFAULT_PARAM}
            title="催办"
            visible={visible}
            confirmLoading={confirmLoading}
            onOk={handleOk}
            destroyOnClose
            onCancel={() => setVisible(false)}
            {...MODAL_FORCE_PARAM}
        >
            {getCardContent(taskRecord)}
            <Form
                style={{ marginTop: '12px' }}
                labelCol={{
                    span: 6
                }}
                wrapperCol={{
                    span: 12
                }}
            >
                <Form.Item label="催办内容">
                    {getFieldDecorator('urgeType', {
                        initialValue: TaskPressType.SYSTEM,
                        rules: [
                            {
                                required: true,
                                message: '请选择催办内容类型！'
                            }
                        ]
                    })(
                        <Select onChange={handleSelectChange} showSearch placeholder="请选择催办内容类型">
                            {TaskPressTypeList.map(item => (
                                <Select.Option key={item.value} value={item.value}>
                                    {item.text}
                                </Select.Option>
                            ))}
                        </Select>
                    )}
                </Form.Item>
                {/* 为了统一样式 */}
                <Form.Item label=" " colon={false}>
                    {getFieldDecorator('content', {
                        rules: [
                            {
                                validator: (rule, value, callback) => {
                                    const type = getFieldValue('urgeType');
                                    if (type === 2 && (!value || !value.trim().length)) {
                                        return callback('请输入自定义内容!');
                                    }
                                    return callback();
                                }
                            }
                        ]
                    })(
                        <LimitedTextArea
                            placeholder="请输入自定义内容"
                            maxLength={50}
                            rows={4}
                            hidden={contentHidden}
                        />
                    )}
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default Form.create()(PressActionModal);
